<template>
<!-- tab -->
  <div class="nav-bar-box">
    <van-tabs v-model="active"  @click="onClick" color="#F44336" title-active-color='#E8340A' swipe-threshold='4'
      swipeable='false'>
      <van-tab v-for="(v,index) of navTabs" :name='v' :key='index' :title="v.title" title-class='title-class'>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
  export default {
    props: {
      navTabs: {
        type: Array,
        default: [ 
        ],
      },
      currentTab:{
        type:String
      }
    },
    data() {
      return {
        active:0,
      };
    },
    computed: {},
    created() {},

    mounted() {},
    methods: {
      onClick(data) {
        this.$emit("navCom", {type:'active',data,info:'当前选中tab'});
      },
    },
    watch: {
      currentTab(val){
        this.active = val
      }
    },
  };

</script>

<style scoped="scoped">
  .nav-bar-box {
    width: 100vw;
    height: 80px;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
  }

  .nav-bar-box>>>.van-tabs__content {
    display: none;
  }

  .nav-bar-box /deep/ .van-tab span {
    padding: 12px 0;
    line-height: normal;
    font-size: 32px;
    color: #999999;
  }

  .nav-bar-box /deep/ .van-tab {
    flex: none;
    flex-basis: auto !important;
  }
  .nav-bar-box /deep/ .van-tab:nth-of-type(1){
    margin-right: 170px;
  }

  .nav-bar-box /deep/ .van-tab.van-tab--active span {
    font-size: 32px;
    font-weight: 500;
    color: #333333;
    letter-spacing: 1px;
    border-bottom: 4px solid #333333;
  }

  .van-tabs--line /deep/ .van-tabs__wrap {
    position: relative;
    height: 100%;
  }

  .van-tabs--line /deep/ .van-hairline--top-bottom::after,
  .van-tabs--line /deep/ .van-tabs__line {
    display: none;
  }
  .nav-bar-box /deep/ .van-tab:nth-child(1) span {
    margin-left: 4px;
  }

</style>
